import React, { Component } from 'react';
import { SearchOutlined } from '@ant-design/icons';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Input, Spin, AutoComplete } from 'antd';
import styles from '@/utils/utils.less';
import HOCSelect from '@/components/AntDesign/Select';

const { Option } = AutoComplete;
// const { Search } = Input;
const FormItem = Form.Item;
// const { Option } = Select;
@Form.create({
  mapPropsToFields(props) {
    const { empNameSelect } = props;
    if (empNameSelect && empNameSelect.length) {
      return {
        empName: Form.createFormField({ value: empNameSelect[0].empName }),
        certNo: Form.createFormField({ value: empNameSelect[0].certNo }),
        certTypeName: Form.createFormField({ value: empNameSelect[0].certTypeName }),
        custName: Form.createFormField({ value: empNameSelect[0].custName }),
        entryStatusName: Form.createFormField({ value: empNameSelect[0].entryStatusName }),
      };
    }
    return true;
  },
})
class AddEmpNameForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      certNo: undefined,
    };
  }

  componentDidMount() {}

  // 选择其中一个
  empData = value => {
    const { empNameList, empData } = this.props;
    if (empNameList) {
      empNameList.forEach(item => {
        if (String(item.sendId) === String(value)) {
          empData([item], false);
          // this.setState({ certNo: item.certNo });
        }
      });
    }
  };

  idVailFunc = () => {
    // const { empNameList, empData } = this.props;
    // const {
    //   form: { validateFieldsAndScroll },
    //   idVailFunc,
    // } = this.props;
    // validateFieldsAndScroll(['certNo'], (err, values) => {
    //   if (!err) {
    //     const { certNo } = this.state;
    //     if (certNo && certNo.trim().length) {
    //       const values1 = {
    //         certNo: certNo.trim(),
    //       };
    //       idVailFunc(values1, false);
    //     } else {
    //       idVailFunc(values, false);
    //     }
    //   }
    // });
  };

  // certData = value => {
  //   const { empNameList, empData } = this.props;
  //   if (empNameList) {
  //     empNameList.forEach(item => {
  //       if (String(item.sendId) === String(value)) {
  //         empData([item], false);
  //         this.setState({ certNo: item.certNo });
  //       }
  //     });
  //   }
  // };

  search = value => {
    // console.log("v",value)
    if (value.trim().length) {
      const values = {
        empName: value.trim(),
      };
      const { onSearch } = this.props;
      onSearch(values);
    }
  };

  // 更改输入证件号值
  changeCertNo = value => {
    this.setState({ certNo: value });
  };

  // 校验证件号
  validateFieldsCertNo = () => {
    const { form, onSearch } = this.props;
    form.validateFieldsAndScroll(['certNo'], (err, values) => {
      if (!err) {
        onSearch(values);
      }
    });
  };

  // 查询证件号
  searchCert = () => {
    const { form } = this.props;
    const { certNo } = this.state;
    if (!form.getFieldValue('certNo')) {
      form.setFieldsValue({ certNo }, () => {
        this.validateFieldsCertNo();
      });
      return;
    }
    this.validateFieldsCertNo();
  };

  render() {
    const {
      form: { getFieldDecorator },
    } = this.props;
    const { empNameList, empNameSelect, loading } = this.props;
    const formItemLayout = {
      labelCol: {
        xs: {
          span: 24,
        },
        sm: {
          span: 9,
        },
      },
      wrapperCol: {
        xs: {
          span: 24,
        },
        sm: {
          span: 12,
        },
        md: { span: 7 },
      },
    };
    let options = null;
    if (empNameList && empNameList.length) {
      options = empNameList.map(opt => (
        <Option key={opt.sendId}>{`${opt.certNo} (${opt.custName})`}</Option>
      ));
    }

    return (
      <div>
        <FormItem {...formItemLayout} label={<span>姓名 </span>}>
          {getFieldDecorator('empName', {
            rules: [
              {
                required: true,
                message: '只能输入汉字或者英文',
                pattern: /^[\u0391-\uFFE5A-Za-z]+$/,
              },
            ],
            initialValue:
              empNameSelect && empNameSelect.length ? empNameSelect[0].empName : undefined,
          })(
            <HOCSelect
              placeholder="请输入关键字检索"
              style={{ width: '100%' }}
              showSearch
              optionFilterProp="children"
              onSearch={this.search}
              onSelect={this.empData}
              notFoundContent={loading ? <Spin size="small" /> : '暂无数据'}
              defaultActiveFirstOption={false}
            >
              {empNameList &&
                empNameList.length &&
                empNameList.map(item => (
                  <Option key={item.sendId}>{`${item.empName}(${item.custName})`}</Option>
                ))}
            </HOCSelect>
          )}
        </FormItem>
        <FormItem {...formItemLayout} label={<span>证件号</span>} className={styles.inputStyle}>
          {getFieldDecorator('certNo', {
            rules: [
              {
                required: true,
                message: '请输入证件号',
              },
            ],
          })(
            <AutoComplete
              dropdownMatchSelectWidth={false}
              style={{ width: '100%' }}
              dataSource={options}
              placeholder="请输入证件号"
              onSelect={this.empData}
              onChange={this.changeCertNo}
            >
              <Input suffix={<SearchOutlined onClick={this.searchCert} />} />
            </AutoComplete>
          )}
        </FormItem>
        <FormItem {...formItemLayout} label={<span>证件类型</span>}>
          {getFieldDecorator('certTypeName', {
            rules: [
              {
                required: true,
                message: '请输入证件类型',
              },
            ],
          })(<Input placeholder="请输入证件类型" disabled />)}
        </FormItem>
        <FormItem {...formItemLayout} label={<span>客户名称</span>}>
          {getFieldDecorator('custName', {
            rules: [
              {
                required: true,
                message: '请输入客户名称',
              },
            ],
          })(<Input placeholder="请输入客户名称" disabled />)}
        </FormItem>

        <FormItem {...formItemLayout} label={<span>在职状态</span>}>
          {getFieldDecorator('entryStatusName', {
            rules: [
              {
                required: true,
                message: '请输入在职状态',
              },
            ],
          })(<Input placeholder="请输入在职状态" disabled />)}
        </FormItem>
      </div>
    );
  }
}

export default AddEmpNameForm;
